<template>
  <div>
    <hr>  
    <h3>{{recive}}</h3>
    <hr>
    <Globecomponet></Globecomponet>
    <!-- <Quanju/> -->
     {{arr[0].name}}
     {{num}}
     <button @click="fn">点击</button>
     <div v-if="flag">
          <AboutView></AboutView>
          <home-view-vue send="我是父组件的数据" @event="fn1"></home-view-vue>
     </div>
      <button @click="flag = !flag">点击修改flag</button>
  </div>
</template>

<script>
import Globale from './components/globale.vue'
import AboutView from "./views/AboutView.vue"
import HomeViewVue from './views/HomeView.vue' // 引入homeView组件
export default {
    components:{ // 组件注册
        HomeViewVue, // 注册HomeView组件,
        AboutView,
        Globale
    },
    data(){
      return {
        recive:"", // 用于接收子组件传递过来的数据
        flag:true,
        name:"zhansgan",
        num:1,
        arr:[{
          name:"zhangsan"
        }]
      }
    },
    methods:{
      fn1(data) { // 子组件传递过来的数据
          this.recive = data
      },
      fn () {
        // this.arr[0].name = "lisi"
        // vue 监听复杂数据类型直接赋值页面并不会重新渲染，需要使用this.$set("需要操作的数据"，"需要操作的下标"，“需要改成的值”)
        this.$set(this.arr,0,{name:"lisi"})
      }
    },
    computed:{ // 计算属性

    },
    created() {

    },
    mounted () {

    },
    watch:{ // 侦听器， 当某个要见监听的数据发生改变后watch里的东西就会执行
      // 第一种写法，以函数的形式
      // num:function (newval,oldval) { // 要监听num的变化，函数名就叫num
      //     // newval是监听到数据的新的值
      //     // oldval是监听到数据的旧的值
      //     console.log(newval,oldval);
      // },
      
      // 第二种写法
      arr:{
        handler(newval,oldval) {
            console.log(newval[0],oldval);
        },
        immediate:true, // 页面一加载wactch就执行一次
        // deep:false // 开启深度监听

      }

    }
}
</script>

<style>

</style>